<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>建材网</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <script src="./js/index.js"></script>
  <script src="./js/jQuery.js"></script>
  <!-- <script src="./js/rem.js"></script> -->
</head>
<body>
  <header class="header clearfix">
    <a class="header-menu fl" href="#"><img src="./img/menu.png" alt=""></a>
    <img class="header-logo fl" src="./img/logo.png" alt="logo">
    <ul class="header-nav fl">
      <li class="header-nav-item fl">胡桃木<strong class="iconfont dropdown">&#xe612;</strong></li>
      <li class="header-nav-item fl">梨花木<strong class="iconfont dropdown">&#xe612;</strong></li>
      <li class="header-nav-item fl">白蜡木<strong class="iconfont dropdown">&#xe612;</strong></li>
      <li class="header-nav-item fl">其他木材<strong class="iconfont dropdown">&#xe612;</strong></li>
    </ul>
    <div class="header-right fr">
      <a class="cart" href="#"><span class="cart iconfont">&#xe6d7;</span><i class="num"></i></a>
      <a href="#"><span class="personal iconfont">&#xe601;</span></a>
      <a href="#"><span class="search iconfont">&#xe632;</span></a>
    </div>
  </header>
  <banner class="banner">
    <div class="banner-img"></div>
    <!-- 遮罩层 -->
    <div class="cover">
      <div class="text">
        <p class="title">没有高度 不足以欣赏</p>
        <span class="desc">没有高度 不足以欣赏</span>
        <p class="line">
          <span class="left"></span>
          <i class="dot"></i>
          <span class="right"></span>
        </p>
      </div>
      <div class="picture">
        <div class="wraper">
          <div class="picture-content">
            <div class="item">
              <img src="./img/banner-ad1.png" alt="">
              <p class="item-desc">地板的文案地板的文案</p>
            </div>
            <div class="item">
              <img src="./img/banner-ad2.png" alt="">
              <p class="item-desc">地板的文案地板的文案</p>
            </div>
            <div class="item">
              <img src="./img/banner-ad3.png" alt="">
              <p class="item-desc">地板的文案地板的文案</p>
            </div>
          </div>
          <div class="picture-share">
            <a class="iconfont" href="#">&#xe604;</a>
            <a class="iconfont" href="#">&#xe66f;</a>
            <a class="iconfont QQ" href="#">&#xe603;</a>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </banner>
  <div class="content1">
    <div class="content1-wrapper">
      <div class="item">
        <div class="item-img">
          <img src="./img/badhome.png" alt="">
        </div>
        <p class="name">卧室用板</p>
      </div>
      <div class="item">
        <div class="item-img">
          <img src="./img/badhome.png" alt="">
        </div>
        <p class="name">卧室用板</p>
      </div>
      <div class="item active">
        <div class="item-img">
          <img src="./img/hotel.png" alt="">
        </div>
        <p class="name">卧室用板</p>
      </div>
      <div class="item">
        <div class="item-img">
          <img src="./img/badhome.png" alt="">
        </div>
        <p class="name">卧室用板</p>
      </div>
    </div>
  </div>
  <div class="content2">
    <div class="content2-left fl">
      <div class="floor">FLOOR</div>
      <h2 class="title">一块好的地板源自自然</h2>
      <span class="line"></span>
      <textarea class="desc" readonly="readonly">The text content of a brand introduction, the text content of a brand introduction, the text content of a brandintroduction, the text content of a brand introduction, the text content of a brand introduction, the text content of abrand introduction, the text content of a brand introduction, the text</textarea>
    </div>
    <div class="content2-right fr">
      <div class="img-wrapper">
        <img src="./img/good.png" alt="">
        <div class="arow">
          <div class="left fl"><span class="iconfont">&#xeb90;</span></div>
          <div class="right fl"><span class="iconfont">&#xe61f;</span></div>
        </div>
      </div>
      <div class="desc">
        <div class="item">
          <p class="row">
            <span class="line"></span><span class="attribute">地板品牌</span>
          </p>
          <p class="floor-name">
            <strong class="name">千图牌地板</strong>
          </p>
        </div>
        <div class="item">
          <p class="row">
            <span class="line"></span><span class="attribute">地板品牌</span>
          </p>
          <p class="floor-name">
            <strong class="name">千图牌地板</strong>
          </p>
        </div>
        <div class="item">
          <p class="row">
            <span class="line"></span><span class="attribute">地板品牌</span>
          </p>
          <p class="floor-name">
            <strong class="name">千图牌地板</strong>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="content3">
    <div class="img"></div>
    <div class="content3-wrapper">
      <div class="main">
        <p class="title">一块好的地板 源自自然</p>
        <p class="desc">A GOOD FLOOR COMES FROM NATURE</p>
        <span class="icon iconfont">&#xe624;</span>
        <span class="play">播放视频</span>
      </div>
    </div>
  </div>
  <div class="content4 clearfix">
    <div class="content4-wraper1">
      <div class="content4-left fl">
        <div class="floor">2018</div>
        <h2 class="title">新地板推荐</h2>
        <span class="line"></span>
      </div>
      <div class="content4-right fr">
        <div class="item item-active">
          <div class="img">
            <img src="./img/icon-1.png" alt="">
          </div>
          <div class="genre">
            <p>地板类型1</p>
            <span>胡桃木</span>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="./img/icon-3.png" alt="">
          </div>
          <div class="genre">
            <p>地板类型1</p>
            <span>胡桃木</span>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="./img/icon-4.png" alt="">
          </div>
          <div class="genre">
            <p>地板类型1</p>
            <span>胡桃木</span>
          </div>
        </div>
         <div class="item">
          <div class="img">
            <img src="./img/icon-1.png" alt="">
          </div>
          <div class="genre">
            <p>地板类型1<p          <span>胡桃木</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content4-wrapper2">
      <div class="content4-item">
        <img src="./img/banner-ad1.png" alt="">
        <div class="item-text">
          <p class="title">胡桃木地板</p>
          <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
          <p class="line"></p>
          <p class="hot">
            <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
            <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
          </p>
        </div>
      </div>
    <div class="content4-item">
      <img src="./img/banner-ad1.png" alt="">
      <div class="item-text">
        <p class="title">胡桃木地板</p>
        <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
        <p class="line"></p>
        <p class="hot">
          <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
          <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
        </p>
      </div>
    </div>
    <div class="content4-item">
      <img src="./img/banner-ad1.png" alt="">
      <div class="item-text">
        <p class="title">胡桃木地板</p>
        <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
        <p class="line"></p>
        <p class="hot">
          <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
          <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
        </p>
      </div>
    </div>
    <div class="content4-item">
      <img src="./img/banner-ad1.png" alt="">
      <div class="item-text">
        <p class="title">胡桃木地板</p>
        <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
        <p class="line"></p>
        <p class="hot">
          <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
          <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
        </p>
      </div>
    </div>
    <div class="content4-item">
      <img src="./img/banner-ad1.png" alt="">
      <div class="item-text">
        <p class="title">胡桃木地板</p>
        <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
        <p class="line"></p>
        <p class="hot">
          <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
          <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
        </p>
      </div>
    </div>
    <div class="content4-item">
      <img src="./img/banner-ad1.png" alt="">
      <div class="item-text">
        <p class="title">胡桃木地板</p>
        <h3 class="price">¥<span class="num">98 </span><span class="txt">/份</span></h3>
        <p class="line"></p>
        <p class="hot">
          <a href="#" class="fl"><span class="iconfont icon">&#xe60b;</span><span>999+</span></a>
          <a href="#" class="fr"><span class="iconfont icon">&#xe662;</span><span>999+</span></a>
        </p>
      </div>
    </div>
    </div>
    </div>
  </div>
  <div class="content5">
    <div class="content5-wrapper">
      <div class="content5-left fl">
        <div class="floor">FLOOR</div>
        <h2 class="title">一块好的地板源自自然</h2>
        <span class="line"></span>
        <textarea class="desc" readonly="readonly">The text content of a brand introduction, the text content of a brand introduction, the text content of a brandintroduction, the text content of a brand introduction, the text content of a brand introduction, the text content of abrand introduction, the text content of a brand introduction, the text</textarea>
      </div>
      <div class="content5-right fr">
        <div class="img-wrapper">
          <img src="./img/good.png" alt="">
          <div class="content5-arrow">
            <div class="arrow-content">
              <span class="iconfont left">&#xeb90;</span>
              <span class="iconfont right">&#xe61f;</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content6">
    <div class="content6-wraper">
      <p class="title1">FROM NATURE</p>
      <p class="line"><span></span></p>
      <div class="main">
        <div class="content">
          <img src="./img/good-small.png" alt="">
          <div class="content-info">
            <div class="floor">FLOOR</div>
            <h2 class="title">一块好的地板源自自然</h2>
            <span class="line"></span>
            <textarea class="desc"
              readonly="readonly">The text content of a brand introduction, the text content of a brand introduction, the text content of a brandintroduction, the text content of a brand introduction, the text content of a brand introduction, the text content of abrand introduction, the text content of a brand introduction, the text</textarea>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span class="dot"></span>
        <span class="dot active"></span>
        <span class="dot"></span>
      </div>
    </div>
  </div>
  <dic class="content7">
    <div class="main">
      <img class="fl" src="./img/logo.png" alt="">
      <ul class="list first fl">
        <li class="item first">走进千图</li>
        <li class="item">公司简介</li>
        <li class="item">管理团队</li>
        <li class="item">公司荣誉</li>
        <li class="item">企业文化</li>
        <li class="item">公司发展大事记</li>
      </ul>
      <ul class="list fl">
        <li class="item first">走进千图</li>
        <li class="item">公司简介</li>
        <li class="item">管理团队</li>
        <li class="item">公司荣誉</li>
        <li class="item">企业文化</li>
        <li class="item">公司发展大事记</li>
      </ul>
      <ul class="list fl">
        <li class="item first">走进千图</li>
        <li class="item">公司简介</li>
        <li class="item">管理团队</li>
        <li class="item">公司荣誉</li>
        <li class="item">企业文化</li>
        <li class="item">公司发展大事记</li>
      </ul>
      <ul class="list fl">
        <li class="item first">走进千图</li>
        <li class="item">公司简介</li>
        <li class="item">管理团队</li>
        <li class="item">公司荣誉</li>
        <li class="item">企业文化</li>
        <li class="item">公司发展大事记</li>
      </ul>
    </div>
  </dic>
  <footer class="footer">
    <div class="line"></div>
    <p>© 2018 上海千图网科技服务有限公司 All rights reserved 粤ICP备170472****</p>
    <p>地址：上海市什么什么地址地址地址</p>
  </footer>
  <div class="back-top" id="back-top"><span class="iconfont icon">&#xe635;</span></div>
</body>
</html>